
var uls = document.querySelector('.box_right>ul');
var id = localStorage.getItem('id')
var token = localStorage.getItem('token')

if (id && token) {


    // 修改list的连接
    // document.querySelector('.list').setAttribute('href', "list.html?token=" + token + '&id=' + id)
    // 发送ajax获取用户信息
    var xhr = new XMLHttpRequest;
    xhr.open('get', `http://localhost:8888/users/info/${id}`)
    xhr.setRequestHeader('authorization', token)
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                var res = xhr.responseText;
                res = JSON.parse(res)
                var { code, info: { username } } = res;
                // console.log(res);
                uls.innerHTML = `
                    <li>
                        <a class="brli1">${username}</a>
                    </li>
                    <li>
                        <a data-id="${id}" data-token="${token}" href="javascript:;" class="logout" style="color:red">退出</a>
                    </li>
                    <li>
                        <a>我的订单</a>
                    </li>
                    <li>z
                        <a>我的京东</a>
                    </li>
                    <li>
                        <a>京东会员</a>
                    </li>
                    <li>
                        <a>企业采购</a>
                    </li>
                    <li>
                        <a>客户服务</a>
                    </li>
                    <li>
                        <a>网站导航</a>
                    </li>
                    <li>
                        <a>手机京东</a>
                    </li>
                  
                `
            }
        }
    }
}

uls.onclick = function () {
    var target = window.event.target || window.event.srcElement;
    if (target.className === 'logout') {
        var xhr = new XMLHttpRequest;
        xhr.open('get', 'http://localhost:8888/users/logout/' + target.getAttribute('data-id'))
        xhr.setRequestHeader('authorization', target.getAttribute('token'))
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var res = xhr.responseText;
                    res = JSON.parse(res)
                    console.log(res);
                    var { code, message } = res;
                    if (code === 1) {
                        alert(message)
                        // 将内容换成登录注册
                        location.href = "goshopping.html"
                    }
                }
            }
        }
    }
}


//获取商品id
var shoppid = location.search.match(/shoppid=([^&]+)/)[1]
console.log(shoppid);

//判断

promiseAjax({
    url: '/abcd',
}).then(res => {
    console.log(res);
    var { list } = res
    list.forEach(item => {
        var zzhe = /^h/
        //通过正则判断id，
        // var bool = zzhe.test(shoppid)
        // console.log(bool);
        if (zzhe.test(shoppid) === true) {
            if (shoppid === item.deal_hid) {
                console.log(item);
                var { deal_img, deal_global, deal_tit } = item
                console.log(deal_img, deal_global, deal_tit);
                var { price_home } = deal_global
                console.log(price_home);

                var imgs = document.querySelectorAll('.enlarge img')
                var IMG = document.querySelectorAll('.back_IMG img')
                var Btext = document.querySelector('.box_Cen .Cen_right .Cenp1 .title')
                var mony = document.querySelector('.box_Cen .Cen_right .Cenp2 .price')
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].setAttribute('src', deal_img)
                }
                for (var i = 0; i < IMG.length; i++) {
                    IMG[i].setAttribute('src', deal_img)
                }
                Btext.innerText = deal_tit
                mony.innerText = '￥' + price_home
            }
        } else {
            if (shoppid === item.deal_hid) {
                console.log(item);
                var { deal_img, deal_group, deal_tit } = item
                console.log(deal_img, deal_group, deal_tit);
                var { price_dis } = deal_group
                console.log(price_dis);

                var imgs = document.querySelectorAll('.enlarge img')
                var IMG = document.querySelectorAll('.back_IMG img')
                var Btext = document.querySelector('.box_Cen .Cen_right .Cenp1 .title')
                var mony = document.querySelector('.box_Cen .Cen_right .Cenp2 .price')
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].setAttribute('src', deal_img)
                }
                for (var i = 0; i < IMG.length; i++) {
                    IMG[i].setAttribute('src', deal_img)
                }
                Btext.innerText = deal_tit
                mony.innerText = '￥' + price_dis

            }
        }
        addcart()
    })
})

//点击加入购物车获取当前商品的id
function addcart() {
    var gosp = document.querySelector('.addCart')
    gosp.onclick = function () {

        var str = localStorage.getItem('data')
        console.log(str);
        var obj = {
            shoppid,
            // num: 1
        }
        var arr = []
        if (str) {  //本地存储中有数据
            arr = JSON.parse(str)
            console.log(arr);
            var ele = arr.find(item => item.shoppid === shoppid)
            console.log(arr);
            if (ele) {
                ele.num += 1
                localStorage.setItem('data', JSON.stringify(arr))
                return false
            } else {
                obj.num = 1
            }
            // var arr = [obj]
        } else { //本地存储中没有数据
            obj.num = 1
        }
        arr.push(obj)
        localStorage.setItem('data', JSON.stringify(arr))

    }
}

//放大镜
function Enlarge(classname) {
    this.box = document.querySelector('.' + classname);
    this.middleBox = this.box.querySelector('.middleBox')
    this.bigBox = this.box.querySelector('.bigBox')
    this.middleImg = this.box.querySelector('.middleBox>img')
    this.bigImg = this.box.querySelector('.bigBox>img')
    this.mask = this.box.querySelector('.mask')
    this.smallImgs = this.box.querySelectorAll('.smallBox img')

}
// 绑定事件
Enlarge.prototype.bindEvent = function () {
    // tab切换
    for (let i = 0; i < this.smallImgs.length; i++) {
        this.smallImgs[i].onclick = () => {
            for (let j = 0; j < this.smallImgs.length; j++) {
                this.smallImgs[j].className = '';
            }
            this.smallImgs[i].className = 'active';
            // 换中图和大图
            this.middleImg.setAttribute('src', this.smallImgs[i].getAttribute('src'))

            this.bigImg.setAttribute('src', this.smallImgs[i].getAttribute('src'))
        }
    }

    // 移入
    this.middleBox.onmouseover = () => {
        this.mask.style.display = 'block';
        this.bigBox.style.display = 'block';
        // 移动
        this.middleBox.onmousemove = () => {
            var e = window.event;
            var x = e.pageX;
            var y = e.pageY;
            var l = x - this.mask.offsetWidth / 2 - this.middleBox.offsetLeft;
            var t = y - this.mask.offsetHeight / 2 - this.middleBox.offsetTop;
            if (l < 0) {
                l = 0
            }
            if (t < 0) {
                t = 0
            }
            if (l > this.middleBox.clientWidth - this.mask.offsetWidth) {
                l = this.middleBox.clientWidth - this.mask.offsetWidth
            }
            if (t > this.middleBox.clientHeight - this.mask.offsetHeight) {
                t = this.middleBox.clientHeight - this.mask.offsetHeight
            }
            this.mask.style.left = l + 'px'
            this.mask.style.top = t + 'px'

            // 计算大图移动
            var bigX = l / this.middleBox.clientWidth * this.bigImg.clientWidth
            var bigY = t / this.middleBox.clientHeight * this.bigImg.clientHeight
            this.bigImg.style.left = -bigX + 'px'
            this.bigImg.style.top = -bigY + 'px'
        }
    }
    this.middleBox.onmouseout = () => {
        this.mask.style.display = 'none';
        this.bigBox.style.display = 'none';
    }
}
var e = new Enlarge('enlarge')

e.bindEvent()






// $('.smallBox img').click(function () {
//     // 在链式操作中，end方法，能将当前返回的元素切换到上一次返回的那个元素
//     // var a = $(this).addClass('active').siblings().removeClass('active').end()
//     // console.log(a);

//     // var imgpath = $(this).attr('src')
//     var imgpath = $(this).addClass('active').siblings().removeClass('active').end().attr('src')
//     $('.middleBox>img').attr('src', imgpath)
//     $('.bigBox>img').attr('src', imgpath)
// })

// // 鼠标移入和移出
// $('.middleBox').hover(function () {
//     // $('.mask').css('display','block')
//     $('.mask').show()
//     // $('.bigBox').css('display','block')
//     $('.bigBox').show()
//     // 移动 鼠标让遮罩动起来
//     $(this).mousemove(function (e) {
//         var x = e.pageX;
//         var y = e.pageY;
//         var l = x - $('.mask').width() / 2
//         var t = y - $('.mask').height() / 2
//         if (l <= $('.middleBox').offset().left) {
//             l = $('.middleBox').offset().left
//         }
//         if (t <= $('.middleBox').offset().top) {
//             t = $('.middleBox').offset().top
//         }
//         if (l >= $('.middleBox').offset().left + $('.middleBox').width() - $('.mask').width()) {
//             l = $('.middleBox').offset().left + $('.middleBox').width() - $('.mask').width()
//         }
//         if (t >= $('.middleBox').offset().top + $('.middleBox').height() - $('.mask').height()) {
//             t = $('.middleBox').offset().top + $('.middleBox').height() - $('.mask').height()
//         }
//         $('.mask').offset({
//             left: l,
//             top: t
//         })

//         var percentX = $('.mask').position().left / $('.middleBox').width()
//         var percentY = $('.mask').position().top / $('.middleBox').height()
//         var bigLeft = percentX * $('.bigBox>img').width()
//         var bigTop = percentY * $('.bigBox>img').height()
//         $('.bigBox>img').css({
//             left: -bigLeft + 'px',
//             top: -bigTop + 'px'
//         })
//     })
// }, function () {
//     // $('.mask').css('display','none')
//     // $('.bigBox').css('display','none')
//     $('.mask').hide()
//     $('.bigBox').hide()
// })